<!DOCTYPE html>
<html>
  <head>
    <title>
      {% ifequal tool_id "all" %}mlab-ns (MLab Naming Service)
      {% else %}{{tool_id|title}} {{address_family}}
      {% endifequal %}
    </title>

    <meta name="viewport" content="width=device-width initial-scale=1.0, user-scalable=no" />

    <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />

    <script
      type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuvQuQGxqdohwnwDzElYPEAvESZSsK1Nc&sensor=false">
    </script>

    <script type="text/javascript">
      var map;
      var green = '81F781';
      var red = 'FF0000';
      var white = 'FFFFFF';
      var blue = '0000FF';
      var black = '000000';
      var warningColor = 'FF8000';
      var userColor = '00BFFF';
      var defaultColor = green;
      var errorColor = red;

      var markersArray = [];
      var onlineMarkersArray = [];
      var offlineMarkersArray = [];
      var errorMarkersArray = [];

      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(41.9000, 12.500),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        var cities = {{cities|safe}};
        for (i in cities) {
          var cityName = '';
          var countryName = '';
          var markerStyle = 'default';
          var statusCount = { 'online': 0, 'offline': 0, 'init': 0 };
          var geo = {};

          var htmlSitesInfo = '';

          var sliverCount = 0;
          for (site in cities[i]) {
            var _site = cities[i][site];
            cityName = _site['city'];
            countryName = _site['country'];

            var htmlSiteInfo = '<h3>' + _site.site_id + '<h3/>';
            geo['latitude'] = _site['latitude'];
            geo['longitude'] = _site['longitude'];
            geo['city'] = _site['city'];
            geo['country'] = _site['country'];

            htmlSiteInfo += '<table>' +
              '<tr>' +
              '<th> </th>' +
              '<th> </th>' +
              '<th> </th>' +
              '<th> </th>' +
              '<th> </th>' +
              '</tr>';
            for (var j in _site.sliver_tools) {
              var sliver_tool = _site.sliver_tools[j];
              var status = sliver_tool.status;
              statusCount[status] += 1;
              sliverCount += 1;
              htmlSiteInfo += '<tr>' +
                '<td>' + sliver_tool.slice_id + '</td>' +
                '<td>' + sliver_tool.tool_id + '</td>' +
                '<td>' + sliver_tool.server_id + '</td>' +
                '<td class="' + status +'">' + status + '</td>' +
                '<td>' + sliver_tool.timestamp + '</td>' +
                '</tr>';
            }
            htmlSiteInfo += '</table>';
            htmlSitesInfo += htmlSiteInfo;
          }
          var htmlInfo = '<div id="siteinfo">' +
            '<h2>' + cityName + ',' + countryName + '</h2>' +
            htmlSitesInfo + '</div>';

          if (statusCount['offline'] == sliverCount) {
            markerStyle = 'error';
          } else if (statusCount['offline'] > 0) {
            markerStyle = 'warning';
          }

          if (statusCount['init'] > 2) {
            markerStyle = 'init';
          }

          var markerIcon = makeIcon(markerStyle, statusCount['offline']);
          var marker = makeMarker(geo, markerIcon);
          marker['html'] = htmlInfo;
          markersArray.push(marker);

          var infowindow = new google.maps.InfoWindow({});
          infowindow.setOptions({maxWidth:700});

          google.maps.event.addListener(
              marker, 'click', function() {
              infowindow.setContent(this.html);
              infowindow.open(map, this); });
        }
        showMarkers();
      }

      function perZoomRadius() {
        // TODO(dominic): replace magic numbers with constants.
        return (-900 * map.getZoom()) + 20000;
      }

      function addMarkerListener(marker) { }

      function makeMarker(data, icon) {
        var position = new google.maps.LatLng(data['latitude'], data['longitude'] );
        var title = data['city'] + ',' + data['country'];
        var marker = new google.maps.Marker({
          position: position,
          title: title,
          icon: icon,
          map: map
        });
        return marker;
      }

      function makeIcon(style, letter) {
        var size_x = 21;
        var size_y = 34;
        var apiURL = 'http://chart.apis.google.com/chart?';

        var chst = 'd_map_pin_letter';
        var chld = letter;
        var color1 = green;
        var color2 = green;

        if (style == 'error') {
          color1 = color2 = errorColor;
        } else if (style == 'warning') {
          color1 = color2 = warningColor;
        } else if (style == 'info') {
          chld = 'x';
          color1 = green;
          color2 = black;
        } else if (style == 'init') {
          chld = 'x';
          color1 = color2 = black;
        } else if (style == 'user') {
          chst = 'd_map_pin_icon';
          chld = 'glyphish_user';
          color1 = color2 = userColor;
        }

        var query_string = 'chst=' + chst + '&' + 'chld=' + chld + '|' + color1 + '|' + color2;

        var icon = new google.maps.MarkerImage(
            apiURL + query_string,
            new google.maps.Size(size_x, size_y),
            new google.maps.Point(0,0),
            null,
            new google.maps.Size(size_x, size_y));
        return icon;
      }

      function clearOverlays() {
        if (markersArray) {
          for (var i = 0; i < markersArray.length; ++i) {
            markersArray[i].setMap(null);
          }
        }
      }

      function showMarkers() {
        if (markersArray) {
          for (var i = 0; i < markersArray.length; ++i) {
            markersArray[i].setMap(map);
          }
          var bounds = new google.maps.LatLngBounds();
          for (var i = 0; i < markersArray.length; ++i) {
            bounds.extend(markersArray[i].position);
          }
          map.fitBounds(bounds)
        }
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>

<body onload="initialize()">
  <div id="container">
    <div id="header">
      <ul class="navigation">
        <img src="/images/mlab-logo.png" align=left hspace="4"/>

        <li>
          <a href="/admin/sites" class="header">Sites</a>
        </li>

        <li>
          <a href="/admin/sliver_tools" class ="header">Sliver Tools</a>
        </li>

        <!--
        <li>
          <a href="/admin/lookup" class="header">Lookup</a>
        </li>
        -->

        {% with 'all glasnost mobiperf ndt neubot npad' as tool_list %} 
        <li>
          {% ifequal address_family "ipv6" %}
            <a href="/admin/map/ipv4" class="header">Map IPv4</a>
          {% else %}
            {% ifequal tool_id "all" %}
              <a href="/admin/map/ipv4" class="header">Map IPv4</a>
            {% else %}
              <a href="/admin/map/ipv4/{{ tool_id }}" class="header">{{ tool_id|title }} IPv4</a>
            {% endifequal %}
          {% endifequal %}

          <ul>
            {% for tool in tool_list.split %}
              {% if address_family == "ipv6" or tool_id != tool %}
                <li><a href="/admin/map/ipv4/{{ tool }}">{{ tool|title }}</a></li>
              {% endif %}
            {% endfor %}
          </ul>
        </li>

        <li>
          {% ifequal address_family "ipv4" %}
            <a href="/admin/map/ipv6" class="header">Map IPv6</a>
          {% else %}
            {% ifequal tool_id "all" %}
              <a href="/admin/map/ipv6" class="header">Map IPv6</a>
            {% else %}
              <a href="/admin/map/ipv6/{{ tool_id }}" class="header">{{ tool_id|title }} IPv6</a>
            {% endifequal %}
          {% endifequal %}

          <ul>
            {% for tool in tool_list.split %}
              {% if address_family == "ipv4" or tool_id != tool %}
                <li><a href="/admin/map/ipv6/{{ tool }}">{{ tool|title }}</a></li>
              {% endif %}
            {% endfor %}
          </ul>
        </li>
        {% endwith %}
      </ul>
    </div>
    <div id="map_canvas"></div>
    <div id="footer">
      <a href="{{ privacy_doc_url }}" class="footer">Privacy policy</a>

      &nbsp; &nbsp; &nbsp; &nbsp;

      <a href="{{ design_doc_url }}" class="footer">Design document</a>

      &nbsp;&nbsp;&nbsp;&nbsp;

      <a href="http://measurementlab.net" class="footer">M-Lab</a>

      &nbsp;&nbsp;&nbsp;&nbsp;

      <a href="http://www.measurementlab.net/content/about-measurement-lab"
        class="footer">About M-Lab</a>

      &nbsp;&nbsp;&nbsp;&nbsp;

      <a href="http://www.measurementlab.net/usage" class="footer">Usage</a>

      &nbsp;&nbsp;&nbsp;&nbsp;

      <a href="http://www.measurementlab.net/contact" class="footer">Contact</a>

      &nbsp;&nbsp;&nbsp;&nbsp;

      <a href="http://www.measurementlab.net/content/faq" class="footer">FAQ</a>

      &nbsp;&nbsp;&nbsp;&nbsp;
    </div>
  </body>
</html>
